<!--
 * @Author: zhang_wenjuan
 * @Date: 2021-05-17 14:27:59
 * @LastEditTime: 2021-07-29 14:15:39
 * @Description: 主变抄录
-->
<template>
    <div id="zhubian_page" class="copyPage">
        <!-- 顶部导航 -->
        <van-nav-bar :title="deviceName+'抄录'" left-arrow @click-left="back" fixed>
            <van-icon class="rotate-icon" name="ellipsis" slot="right" size="20" @click="showMore=true" />
            <template slot="right">
                <div class="parent-circle">
                    <div class="child-circle"></div>
                </div>
            </template>
        </van-nav-bar>
        <!-- 更多按钮弹窗 -->
        <div class="popupPage" v-if="showMore">
            <div class="mask" @click="showMore=false">
                <div class="popup">
                    <van-cell v-for="(item,i) of moreButtons" :key="i" :value="item.name" @click="showPopup(item.name)" />
                </div>
            </div>
        </div>
        <!-- 折叠面板 -->
        <van-collapse v-model="activeNames">
            <van-collapse-item v-for="(item,index) in deviceData" :key='index' :name='item.bayName'>
                <div slot="title" style="display: flex;">
                    <span class="line_green"></span>
                    <span>{{item.bayName}}</span>   
                </div>
                <div v-for="(item1,index) in item.deviceList" :key='index' style="margin-bottom:20px;">
                    <div class="line-title font16" style="padding-bottom: 1rem;">{{item1.deviceName}} </div>
                    <div v-for="(item2,i2) of submitCopyData" :key='i2' v-if="item2.deviceName == item1.deviceName">
                        <!-- <div v-if="item2.copyName !='本次动作次数' && item2.copyName !='累计动作次数' && item2.copyName !='泄漏电流最大值' && item2.copyName !='表盘最大值'"> -->
                        <div class="line-title font14">{{item2.copyName}} </div>
                        <div>
                            <div class="line">
                                <van-field v-model="item2.copyValue" type="number" maxlength="5" label="查看历史" input-align="right" :placeholder="'请输入'+item2.copyName">
                                    <div slot="label">
                                        <span @click="getHistory(item2,i2)">查看历史</span>
                                    </div>
                                </van-field>
                            </div>
                           
                        </div>
                        <!-- </div> -->
                        <!-- <div class="noHistory" v-if="item2.copyName =='本次动作次数' || item2.copyName =='累计动作次数' || item2.copyName =='泄漏电流最大值' || item2.copyName =='表盘最大值'">
                            <div class="line">
                                <van-field v-model="item2.copyValue" maxlength="5" :label="item2.copyName" input-align="right" :placeholder="'请输入'+item2.copyName">
                                </van-field>
                            </div>
                        </div> -->
                    </div>
                </div>
            </van-collapse-item>
        </van-collapse>
         <!-- 历史数据弹窗 -->
        <van-popup v-model="show" position="bottom" style="height:320px;" @click-overlay="colsePopup">
            <div class="popup-title">查看历史</div>
            <van-radio-group v-model="radio">
                <div>
                    <van-row>
                        <van-col span="10">时间</van-col>
                        <van-col span="8">{{showHistory}}</van-col>
                        <van-col span="6"></van-col>
                    </van-row>
                    <div style="height:170px;" >
                        <van-row v-for="(item3,i3) in historyData" :key="i3" @click="getCopyValue1(item3,i3)">
                            <van-col span="10">{{item3.createTime | creatTime}}</van-col>
                            <van-col span="8">{{item3.copyValue}}</van-col>
                            <van-radio  :name="i3" />
                        </van-row>
                    </div>
                </div>
            </van-radio-group>
            <div class="btnBox">
                <div class="flex">
                    <div class="noPass" @click="colsePopup">取消</div>
                    <div class="pass" @click="confirm()">确定</div>
                </div>
            </div>
        </van-popup>
        <!-- 底部按钮区域 -->
        <div class="footPart">
            <van-button size="small" @click="back">取消</van-button>
            <van-button class="sureBtn" size="small" @click="sumbit">提交</van-button>
        </div>
        <van-popup v-model="byNameShow" position="bottom" style="height:30%;">
            <div class="popup-title">间隔列表</div>
            <div class="popup-auto">
                <div v-for="(item,index) in deviceData" :key='index'>
                    <div class="popup-text">{{item.bayName}}</div>
                </div>
            </div>
        </van-popup>
    </div>
</template>
<script type="text/javascript">
    import Utils from '@/utils/util'
    import { addCopyRecord , getHistoryIInfo , getDeviceByDeviceType , getChildConfigList , getCopyValue } from '../../api/dataCopy';
    export default {
        name: "zhubianCopy",
        components: {

        },
        data() {
            return {
                // 是否显示历史数据弹窗
                show: false,
                text: "",
                // 激活的折叠面板选项
                activeNames: ['1'],
                //是否展示更多按钮
                showMore: false,
                //是否展示间隔目录
                byNameShow:false,
                // 抄录类型
                moreButtons: [
                    { name: "同步数据" },
                    { name: "间隔目录" },
                    { name: "二维码" },
                    { name: "RFID" },
                ],
                // 提交的数据
                submitCopyData: [],
                // 提交的数据备份验证
                submitCopyDataBake: [],
                //管理员信息
                user:JSON.parse(localStorage.getItem('user')),
                //登录人的信息
                userInfo:JSON.parse(localStorage.getItem('userInfo')),
                subId:'',   //变电站ID
                deviceId:'',    //设备类型ID
                deviceName:'',  //设备类型
                copyConfigId:'',    //抄录项ID
                deviceData:[], //设备类型下的设备间隔和设备
                copyChlidList:[],   //抄录子项  
                showHistory:'',      //展示历史数据 ，选中的抄录子项名字
                showDevice:'',
                historyData:[],        //历史数据
                selectValue:'', //选中的历史值
                indexBake:'', //选中的抄录子项下标
                valueBake:'', //选中的抄录值
                // copyName:'',    //选中的抄录子项名字
                radio:'',
                copyValueList:[]    //抄录子项的上一次抄录值列表
            }
        },
        created() {


        },
        mounted() {
            this.subId = this.$route.params.substationId;
            this.deviceId = this.$route.params.deviceTypeId;
            this.deviceName = this.$route.params.deviceTypeName;
            this.copyConfigId = this.$route.params.copyConfigId;
            this.getDevice()
        },
        methods: {
            /**
             * @description: 返回
             */
            back() {
                this.$router.push({
                    name: "copyMenu"
                })
            },
            /**
             * @description: 重置数据
             */
            init() {
               this.submitCopyData=[],
               this.historyData=[],
               this.copyChlidList=[],
               this.deviceData=[]
            },
             /**
             * @description: 重置选择历史数据
             */
            initHistory() {
               this.indexBake = ''
               this.valueBake = ''
               this.radio = ''
               this.selectValue = ''
            },
            /**
             * @description: 提交
             */
            sumbit() {
                this.addCopy()
            },
            /**
             * @description: 历史数据赋值
             */
            getCopyValue1(i3,index) {
                var self = this;
                self.valueBake = i3.copyValue
                self.radio = index
                // console.log(i3)
            },
             /**
             * @description:更多按钮功能
             */
            showPopup(e) {
                if(e == '间隔目录'){
                    this.byNameShow = true
                }
                 if(e == '同步数据'){
                    this.init()
                    this.getDevice()
                    // setTimeout(this.$Toast.success('同步成功'),500)
                }
            },
            /**
             * @description: 获取设备
             */
            getDevice() {
                var self = this
                var info = {
                deviceName:'',
                deviceTypeId:self.deviceId,
                roleCode: "",
                substationId: self.subId,
                userId: self.userInfo.userId
                }
                self.$Toast.loading({
                    duration: 0,//展示时长 0不会消失
                    message: "正在获取抄录数据...",
                    forbidClick: true,//是否禁止背景点击
                    overlay: true//是否显示背景遮罩层
                })
                getDeviceByDeviceType(info).then(res=>{
                    self.$Toast.clear();
                    if(res.success){
                        self.deviceData = res.data
                        self.getChildConfig()
                        self.$Toast.success('操作成功')
                    }else{
                        console.log(res.msg)
                    }
                }).catch(err=>{
                    console.log('查询设备失败')
                })
            },
            /**
             * @description: 获取抄录子项
             */
            getChildConfig() {
                var self = this
                self.copyChlidList = []
                self.submitCopyDataBake = []
                var obj2 = []
                var info = {
                copyItemConfigId:self.copyConfigId,
                pageNum:'1',
                pageSize:'10',
                roleCode: "",
                userId: self.userInfo.userId
                }
                getChildConfigList(info).then(res=>{
                    if(res.success){
                        self.copyChlidList = res.data
                        // console.log(res.data)
                        for(let i=0; i<self.deviceData.length; i++){
                            for(let j=0;j<self.deviceData[i].deviceList.length;j++){
                                for(let k=0;k<res.data.length;k++){
                                    let obj={
                                        copyCode:res.data[k].copyCode,
                                        copyName:res.data[k].copyName,
                                        copyValue:"",
                                        deviceId:self.deviceData[i].deviceList[j].deviceId,
                                        deviceName:self.deviceData[i].deviceList[j].deviceName,
                                    }
                                    self.submitCopyData.push(obj)
                                    obj2.push(obj)
                                }
                                self.submitCopyDataBake.push(obj2)
                                obj2 = []
                            }
                        }
                        self.getCopyValueList()
                        // console.log(self.deviceData)
                    }else{
                        console.log(res.msg)
                    }
                }).catch(err=>{
                    console.log('查询抄录子项失败')
                })
            },
             /**
             * @description: 获取上一次的抄录值
             */
            getCopyValueList() {
                var self = this;
                for(let i=0;i<self.submitCopyData.length;i++){
                    var parmas={
                        "copyCode": self.submitCopyData[i].copyCode,
                        "deviceId": self.submitCopyData[i].deviceId,
                        "roleCode": "",
                        "userId": self.userInfo.userId
                    }
                    getCopyValue(parmas).then(res => {
                        if (res.success) {
                            self.copyValueList[i]={
                                'copyValue':res.data.copyValue
                            }
                            self.submitCopyData[i].copyValue=res.data.copyValue
                        } else {
                            self.$Toast.fail(res.msg)
                        }
                    }).catch(err => {
                        self.$Toast.fail(err)
                    })
                }
                console.log(self.copyValueList)
            },
            /**
             * @description: 保存压变数据
             */
            addCopy() {
                var self = this;
                //输入验证
                for(let i=0;i<self.submitCopyDataBake.length;i++){
                    for(let j=0;j<self.submitCopyDataBake[i].length;j++){
                        if(self.submitCopyDataBake[i][j].copyValue && self.copyChlidList[j].copyRangeMaxmum && self.copyChlidList[j].copyRangeMinimum){
                            if(self.submitCopyDataBake[i][j].copyValue<parseInt(self.copyChlidList[j].copyRangeMinimum) || self.submitCopyDataBake[i][j].copyValue>parseInt(self.copyChlidList[j].copyRangeMaxmum)){
                                return self.$Toast.fail(self.submitCopyDataBake[i][j].deviceName+'\n'+self.submitCopyDataBake[i][j].copyName+'\n'+'超出范围')
                            }
                        }
                    }
                }
                //空值采用上一次的抄录值
                for(let i=0;i<self.submitCopyData.length;i++){
                    if(!self.submitCopyData[i].copyValue){
                        self.submitCopyData[i].copyValue = self.copyValueList[i].copyValue
                    }
                }
                // return console.log(self.submitCopyData)
                // 提交的数据
                var params = {
                    copyPerson: self.userInfo.userName,
                    copyPersonId: self.userInfo.userId,
                    copyTime: Date.now(),
                    deviceDataList: self.submitCopyData,
                    deviceType: self.deviceId,
                    deviceTypeName:self.deviceName,
                    roleCode:'',
                    substationId: self.copyChlidList[0].substationId,
                    substationName: self.copyChlidList[0].substationName,
                    userId: self.userInfo.userId
                };
                // console.log(params)
                // params.requireFinishTime = this.currentDate;
                this.$Toast.loading({
                    duration: 0,//展示时长 0不会消失
                    message: "抄录数据提交中...",
                    forbidClick: true,//是否禁止背景点击
                    overlay: true//是否显示背景遮罩层
                })
                addCopyRecord(params).then(res => {
                    self.$Toast.clear();
                    if (res.success) {
                        self.$router.push({ name: "copyMenu", params: {} })
                    } else {
                        self.$Toast.fail(res.msg)
                    }
                }).catch(err => {
                    self.$Toast.fail(err)
                })
            },
            /**
             * @description: 查看历史
             */
            getHistory(c,i) {
                var self = this;
                // 提交的数据
                var params = {
                    copyCode: c.copyCode,
                    roleCode: "",
                    userId: self.userInfo.userId,
                    deviceId:c.deviceId,
                    deviceName:c.deviceName,
                };
                // self.$Toast.loading({
                //     duration: 0,//展示时长 0不会消失
                //     message: "查看历史数据中...",
                //     forbidClick: true,//是否禁止背景点击
                //     overlay: true//是否显示背景遮罩层
                // })
                getHistoryIInfo(params).then(res => {
                    if (res.success) {
                        // console.log(res)
                        if(res.data.length == '0') {return self.$Toast.fail('暂无历史数据')}
                        self.historyData=res.data
                        self.showHistory = c.copyName
                        self.showDevice = c.deviceName
                        self.indexBake = i
                        self.show = true
                        // self.$Toast.clear();
                    } else {
                    }
                }).catch(err => {
                    self.$Toast.fail(err)
                })
            },
            /**
             * @description: 关闭历史弹窗
             */
            colsePopup(){
                var self = this;
                self.show = false
                self.initHistory()
                // console.log('11111')
            },
            /**
             * @description: 确认历史值
             */
            confirm(){
                var self = this;
                // console.log(i2)
                self.submitCopyData[self.indexBake].copyValue = self.valueBake?self.valueBake:self.submitCopyData[self.indexBake].copyValue
                self.initHistory()
                // console.log(self.submitCopyData)
                self.show = false
            }
        },
        watch: {
        },
        filters: {
            creatTime(e){
            return Utils.DateUtil.getFormatDateByLong(e, 'yyyy-MM-dd hh:mm')
            }
        }
    }
</script>
<style scoped>
    #zhubian_page {
        width: 100%;
        height: 100%;
        padding-bottom: 0;
        background: #fff;
    }

    .van-nav-bar {
        background: #17b49b;
    }

    .van-nav-bar /deep/ .van-icon {
        color: #fff;
        font-size: 22px;
    }

    .van-nav-bar /deep/ .van-nav-bar__text {
        color: #fff;
        font-size: 18px;
    }

    .van-nav-bar /deep/ .van-button {
        background: #fff;
        color: #17b49b;
        width: 60px;
        border-radius: 4px;
        margin-right: 10px;
    }

    .popup {
        position: absolute;
        top: 46px;
        right: 40px;
        /* width: 150px; */
        /* height: 84px; */
    }

    .popup .van-cell {
        background: #17b49b;
        border-bottom: 2px solid #fff;
    }
    .popup  :last-child{
        border-bottom: 1px solid #17b49b;
    }

    .popup .van-cell__value--alone {
        color: #fff;
        text-align: center;
    }

    /* 更多弹窗按钮样式 */
    .popupPage {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
        height: 100%;
        text-align: left;
    }

    .mask {
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.4);
    }

    /* 折叠面板区域 */
    .van-collapse {
        margin-top: 46px;
    }

    .xiangbieItem {
        margin-top: 20px;
    }

    .line {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .van-collapse /deep/ .van-button--plain.van-button--info {
        color: #17b49b;
    }

    .van-button--info {
        border: 1px solid #17b49b;
    }

    /* 底部按钮区域 */
    .footPart {
        width: 100%;
        height: 50px;
        position: fixed;
        bottom: 0;
        left: 0;
        border-top: 1px solid #efefef;
        background: #fff;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .footPart .van-button {
        width: 100px;
        margin: 0 10px;
        border-radius: 5px;
    }

    .sureBtn {
        background: #17b49b;
        color: #fff;
    }
    .popup-title{
        font-size: 1rem;
        line-height: 24px;
        background: rgb(23, 180, 155);
        color: rgb(255, 255, 255);
        text-align: center;
        padding: 12px
    }
    .popup-text{
        font-size: 1rem;
        line-height: 24px;
        color: #999999;
        text-align: center;
        padding: 12px;
        border-bottom:1px solid #ccc; 
    }
    .popup-auto{
        height: calc(100% - 48px);
        overflow: auto;
    }
    /* #zhubian_page  ::after{
        border:0!important;
    } */
    [class*=van-hairline]::after{
		border: none !important;
	}
    .van-collapse-item--border::after{
		border: none !important;
    }
    /* #zhubian_page .history{ */
        /* padding-bottom: 10px; */
        /* border-bottom: 1px solid #f3f3f3; */
    /* } */
    /* #zhubian_page .noHistory{
        padding-bottom: 10px;
        border-bottom: 1px solid #f3f3f3;
    }
    #zhubian_page .noHistory .line /deep/ .van-field__label{
        background:#fff;
        color:#969799;
        text-align:left;
        width: 7em;
        padding: 0;
    } */
    .bgColor{
        background: #F5F6FA;        
    }
    .van-col{
        font-size: 1rem;
        color: #333333;
        text-align: center;
        padding: 10px;
    }
    .van-row{
        margin:0 16px 8px 16px;
        border-bottom: 1px solid #ccc;
    }
    .van-radio{
        justify-content: space-around;
        padding-top: 10px;
    }
    .btnBox {
        /* position: absolute; */
        /* left: 0; */
        /* bottom: 0; */
        /* margin: 1rem; */
        /* width: 100vw; */
        padding-bottom: 20px;
    }

    .flex {
        width: 40%;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .flex>div {
        width: 6rem;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        border-radius: 8px;
    }

    .noPass {
        background-color: #fff;
        text-align: center;
        color: #000;
        margin-right: 0.5rem;
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(51, 51, 51, 1);
    }

    .pass {
        color: #fff;
        margin-left: 0.5rem;
        background: inherit;
        background-color: rgb(24, 181, 156);
        border: none;
    }
</style>